<style>
    .p-info p {
        font-size: 12px;
        height: 24px;
        background-color: rgba(68, 82, 213, .09411764705882353);
        line-height: 24px;
        border-radius: 12px;
        position: relative;
        padding-left: 115px;
        margin-bottom: 10px;
    }

    .p-info p > span:first-child {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #4579ee;
        color: #fff;
        width: 100px;
        text-align: center;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }

    .p-info p:last-child {
        margin-bottom: 0;
    }

    .top-button-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>


<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div>
            <div style="padding: 10px 10px 10px 10px;" class="layui-panel">

                <div class="top-button-container">
                    <button id="btn-back" lay-on="btnBack" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-return"></i>返回
                    </button>
                    <div>
                        <button id="btn-export" lay-on="btnExport" class="layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-download-circle"></i>导出项目
                        </button>
                        <button id="btn-import" lay-on="btnImport" class="layui-btn layui-btn-sm" lay-options="{accept: 'file', exts: 'zip|rar|7z'}">
                            <i class="layui-icon layui-icon-upload-circle"></i>导入项目
                        </button>
                        <button id="btn-member" lay-on="btnMember" class="layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-user"></i>项目成员
                        </button>
                    </div>
                </div>

                <div class="p-info" style="margin-top: 10px">
                    <p>
                        <span>项目ID</span><span id="headerProjectId"></span>
                    </p>
                    <p>
                        <span>项目名称</span><span id="headerProjectName"></span>
                    </p>
                    <p>
                        <span>接口根地址</span><span id="headerRootAddress">https://www.fastmock.site/mock/2209af7524129ea3443d4dc613251578/api</span>
                    </p>
                </div>
            </div>
            <div style="padding: 10px 10px 10px 10px;margin-top: 10px;" class="layui-panel">

                <fieldset class="table-search-fieldset">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form" action="" lay-filter="search-form">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">接口名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="mockName" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">接口地址</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="url" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">
                                        <i class="layui-icon layui-icon-search"></i>搜 索
                                    </button>
                                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                            lay-filter="data-reset-btn">
                                        <i class="layui-icon layui-icon-refresh"></i> 重 置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <div class="layuimini-table">
                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>

    <a class="layui-btn layui-btn-xs" lay-event="more">
        更多
        <i class="layui-icon layui-icon-down"></i>
    </a>
</script>

<script type="text/html" id="addDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="add-form" id="add-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">接口名称</label>
                <div class="layui-input-block">
                    <input type="text" name="mockName" lay-verify="required" lay-vertype="tips" lay-reqtext="接口名称不能为空"
                           placeholder="请输入接口名称" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">请求方式</label>
                <div class="layui-input-block">
                    <select name="method" lay-filter="method" lay-verify="required" lay-vertype="tips" lay-reqtext="请求方式不能为空">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">HTTP响应码</label>
                <div class="layui-input-block">
                    <input type="number" name="httpCode" lay-affix="number" placeholder="请输入返回延时" class="layui-input" value="200"
                           step="1" min="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">接口路径</label>
                <div class="layui-input-block">
                    <input type="text" name="url" lay-verify="required" lay-reqtext="接口路径不能为空" lay-vertype="tips"
                           placeholder="请输入接口路径" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">返回延时</label>
                <div class="layui-input-block">
                    <input type="number" name="delay" lay-affix="number" placeholder="请输入返回延时" class="layui-input"
                           step="1" min="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">开启Mock.js</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="mockjsFlag" value="0" lay-skin="switch" lay-filter="mockjsFlag"
                           title="是|否">
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md11">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label required">接口数据</label>
                        <div class="layui-input-block">
                            <textarea name="jsonData" class="layui-textarea" rows="10" placeholder="请输入接口数据"
                                      lay-verify="required" lay-vertype="tips"
                                      lay-reqtext="接口数据不能为空"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <div style="margin-left: 11px;" class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-xs" lay-on="format">格式化</button>
                        <button type="button" class="layui-btn layui-btn-xs" lay-on="zip" style="width: 48px;">压缩
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea layui-textarea-small"
                              placeholder="请输入其他备注信息"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-submit lay-filter="addSaveBtn">保存</button>
                <button class="layui-btn layui-btn-primary" type="button" lay-filter="closeAddDialog">取消</button>
            </div>
        </form>
    </div>
</script>

<script type="text/html" id="editDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="edit-form" id="edit-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">接口名称</label>
                <div class="layui-input-block">
                    <input type="text" name="mockName" lay-verify="required" lay-reqtext="接口名称不能为空" lay-vertype="tips"
                           placeholder="请输入接口名称" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">请求方式</label>
                <div class="layui-input-block">
                    <select name="method" lay-filter="method" lay-verify="required" lay-reqtext="请求方式不能为空" lay-vertype="tips">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">HTTP响应码</label>
                <div class="layui-input-block">
                    <input type="number" name="httpCode" lay-affix="number" placeholder="请输入返回延时" class="layui-input" step="1" min="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">接口路径</label>
                <div class="layui-input-block">
                    <input type="text" name="url" lay-verify="required" lay-reqtext="接口路径不能为空" lay-vertype="tips" placeholder="请输入接口路径" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">返回延时</label>
                <div class="layui-input-block">
                    <input type="number" name="delay" lay-affix="number" placeholder="请输入返回延时" class="layui-input" step="1" min="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">开启Mock.js</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="mockjsFlag" lay-filter="mockjsFlag" value="0" lay-skin="switch" title="是|否">
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md11">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label required">接口数据</label>
                        <div class="layui-input-block">
                            <textarea name="jsonData" class="layui-textarea" rows="10" placeholder="请输入接口数据"
                                      lay-verify="required" lay-vertype="tips"
                                      lay-reqtext="接口数据不能为空"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <div style="margin-left: 11px;" class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-xs" lay-on="format">格式化</button>
                        <button type="button" class="layui-btn layui-btn-xs" lay-on="zip" style="width: 48px;">压缩
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea layui-textarea-small"
                              placeholder="请输入其他备注信息"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-submit lay-filter="editSaveBtn">保存</button>
                <button class="layui-btn layui-btn-primary" type="button" lay-filter="closeEditDialog">取消</button>
            </div>
        </form>
    </div>
</script>


<script>
    layui.use(['form', 'util', 'table', 'miniAjax', 'miniPage', 'dropdown', 'upload'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            table = layui.table,
            dropdown = layui.dropdown,
            miniAjax = layui.miniAjax,
            miniPage = layui.miniPage,
            upload = layui.upload,
            util = layui.util;

        // 下面这两种方式都能获取到参数
        console.log('第一种：' + sessionStorage.getItem("projectId"));
        console.log('第二种：' + getUrlKeyValue("projectId"));
        let projectId = isNotEmpty(getUrlKeyValue("projectId")) ? getUrlKeyValue("projectId") : sessionStorage.getItem("projectId");

        miniAjax.get({
            url: "/projectinfo/detail",
            data: { // 参数
                id: projectId
            },
            success: function (res) {
                if (res.code === 0) {
                    $("#headerProjectId").text(res.data.id);
                    $("#headerProjectName").text(res.data.projectName);
                    $("#headerRootAddress").text(getLocalHost() + '/mock/' + res.data.id + res.data.path);
                } else {
                    layer.msg(res.msg, {time: 1000, icon: 2});
                }
            },
            error: function (error) {
                layer.msg(error, {time: 1000, icon: 2});
            }
        });

        // 渲染
        upload.render({
            elem: '#btn-import', // 绑定多个元素
            url: '/mockinfo/import', // 此处配置你自己的上传接口即可
            accept: 'file', // 普通文件
            data: {
                projectId: projectId
            },
            done: function(res) {
                layer.msg(res.msg, {time: 1000, icon: 1});
            }
        });

        util.on('lay-on', {
            btnBack: function () {
                sessionStorage.removeItem('projectId');
                window.history.back();
            },
            btnExport: function () {
                miniAjax.download({
                    url: '/mockinfo/export?projectId=' + projectId
                });
            },
            btnImport: function () {

            },
            btnMember: function () {
                let content = miniPage.getHrefContent('page/projectMember.html');
                let index = layer.open({
                    title: '项目成员',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '780px', // 宽度780, 高度自适应
                    offset: '120px', // 手动设置垂直坐标
                    content: content,
                    success: function (layero, dIndex) {
                    },
                    end: function (index) {
                    },
                    full: function(layero, index, that) {
                        // 这样做，是为了放大缩小时，表格可以自适应大小
                        table.reload('projectMemberTableId');
                    },
                    restore: function(layero, index, that) {
                        table.reload('projectMemberTableId');
                    }
                });
            }
        });

        var currTable = table.render({
            elem: '#currentTableId',
            url: '/mockinfo/query',
            method: 'post',
            contentType: 'application/json',
            where: {'projectId': projectId}, // 初始化时带的参数
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.totalCount,
                    "data": res.data.records
                };
            },
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {type: 'numbers', width: '5%', title: '#', align: 'center'},
                {field: 'mockName', width: '10%', title: '接口名称'},
                {
                    field: 'method', width: '7%', title: '请求类型', templet: function (d) {
                        return showDictValue("mock_info_method", d.method);
                    }
                },
                {
                    field: 'url', width: '15%', title: 'URL', templet: function (d) {
                        return `<a href="javascript:;" class="layuimini-link" lay-event="copy" onmouseover="showTip(this)" onmouseleave="closeTip(this)">${d.url}</a>`
                    }
                },
                {field: 'delay', width: '10%', title: '返回时延', align: 'center'},
                {field: 'createdAt', title: '创建时间', width: '10%'},
                {
                    field: 'mockjsFlag', title: '启用mock.js', width: '10%', align: 'center', templet: function (d) {
                        return showDictValue("mock_info_mockjs_flag", d.mockjsFlag);
                    }
                },
                {
                    field: 'status', title: '状态', width: '10%', align: 'center', templet: function (d) {
                        return `<input type="checkbox" name="urlStatus" value="${d.id}" lay-skin="switch" lay-text="启用|停用" lay-filter="statusDemo" ${d.status === 0 ? "checked" : ""}>`;
                    }
                },
                {field: 'remark', width: '10%', title: '备注信息'},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#currentTableBar', align: "center"}
            ]],
            autoSort: false,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            // 执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                },
                where: Object.assign({}, data.field, {'projectId': projectId})
            });
            return false;
        });

        // 监听重置操作
        form.on('submit(data-reset-btn)', function (data) {
            form.val("search-form", {
                "url": '',
                "mockName": ''
            });
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1
                },
                where: Object.assign({}, form.val("search-form"), {'projectId': projectId})
            });
            return false;
        });

        // 监听启用/停用操作
        form.on('switch(statusDemo)', function (obj) {
            console.log(this.value + ' ：' + this.name + '：' + obj.elem.checked);
            if (obj.elem.checked == true) {
                miniAjax.get({
                    url: '/mockinfo/enable?id=' + this.value,
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    },
                    error: function (error) {
                        layer.msg(error, {time: 1000, icon: 2});
                    }
                });
            } else {
                miniAjax.get({
                    url: '/mockinfo/disable?id=' + this.value,
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    },
                    error: function (error) {
                        layer.msg(error, {time: 1000, icon: 2});
                    }
                });
            }
        });


        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') { // 监听添加操作
                var index = layer.open({
                    title: '新增接口',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '780px', // 宽度580, 高度自适应
                    content: $('#addDialog').html(),
                    success: function (layero, dIndex) {
                        generateSelect("mock_info_method", layero.find("[name='method']"));
                        updateSwitchAttributes("mock_info_mockjs_flag", layero.find("[name='mockjsFlag']"));

                        form.render(null, 'add-form');
                        form.val('add-form', {
                            "mockjsFlag": true,
                        });

                        util.on('lay-on', {
                            format: function () {
                                let data = form.val("add-form");
                                form.val("add-form", {
                                    "jsonData": formatJson(data.jsonData)
                                });
                            },
                            zip: function () {
                                let data = form.val("add-form");
                                form.val("add-form", {
                                    "jsonData": zipJson(data.jsonData)
                                });
                            },
                        });

                        // 表单提交事件
                        form.on('submit(addSaveBtn)', function (data) {
                            if (!data.field.mockjsFlag) {
                                data.field.mockjsFlag = 1;
                            }
                            miniAjax.postJSON({
                                url: '/mockinfo/add',
                                data: JSON.stringify(Object.assign({}, data.field, {'projectId': projectId})),
                                success: function (res) {
                                    if (res.code === 0) {
                                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                            layer.close(dIndex);
                                        });
                                    } else {
                                        layer.msg(res.msg, {time: 1000, icon: 2});
                                    }
                                },
                                error: function (error) {
                                    layer.msg(error, {time: 1000, icon: 2});
                                }
                            });
                            return false;
                        });

                        // 监听取消按钮
                        layero.find("button[lay-filter='closeAddDialog']").click(function () {
                            layer.close(dIndex);
                        });
                    },
                    end: function (index) {
                        // 重载表格，刷新数据
                        currTable.reload();
                    }
                });
            }
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var lineData = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑接口',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '780px', // 宽度580, 高度自适应
                    content: $('#editDialog').html(),
                    success: function (layero, dIndex) {
                        generateSelect("mock_info_method", layero.find("[name='method']"));
                        updateSwitchAttributes("mock_info_mockjs_flag", layero.find("[name='mockjsFlag']"));

                        // 回显表单数据
                        form.render(null, 'edit-form');
                        form.val('edit-form', lineData);
                        form.val("edit-form", {
                            "mockjsFlag": lineData.mockjsFlag === 0
                        });

                        util.on('lay-on', {
                            format: function () {
                                let data = form.val("edit-form");
                                form.val("edit-form", {
                                    "jsonData": formatJson(data.jsonData)
                                });
                            },
                            zip: function () {
                                let data = form.val("edit-form");
                                form.val("edit-form", {
                                    "jsonData": zipJson(data.jsonData)
                                });
                            },
                        });

                        // 表单提交事件
                        form.on('submit(editSaveBtn)', function (data) {
                            data.field.id = lineData.id;
                            if (!data.field.mockjsFlag) {
                                data.field.mockjsFlag = 1;
                            }

                            miniAjax.postJSON({
                                url: '/mockinfo/edit',
                                data: JSON.stringify(data.field),
                                success: function (res) {
                                    if (res.code === 0) {
                                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                            layer.close(dIndex);
                                        });
                                    } else {
                                        layer.msg(res.msg, {time: 1000, icon: 2});
                                    }
                                },
                                error: function (error) {
                                    layer.msg(error, {time: 1000, icon: 2});
                                }
                            });
                            return false;
                        });

                        // 监听取消按钮
                        layero.find("button[lay-filter='closeEditDialog']").click(function () {
                            layer.close(dIndex);
                        });
                    },
                    end: function (index) {
                        // 重载表格，刷新数据
                        currTable.reload();
                    }
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除此接口吗', function (index) {
                    layer.close(index);
                    miniAjax.get({
                        url: '/mockinfo/delete?id=' + lineData.id,
                        success: function (res) {
                            if (res.code === 0) {
                                layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                    // 重载表格，刷新数据
                                    currTable.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        },
                        error: function (error) {
                            layer.msg(error, {time: 1000, icon: 2});
                        }
                    });
                });
            } else if (obj.event === 'copy') {
                handleClipboard(lineData.url)
            } else if (obj.event === 'more') {
                window.mockId = lineData.id;
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '版本',
                        id: 'history'
                    },{
                        title: '日志',
                        id: 'accessLog'
                    }],
                    click: function(menudata){
                        if(menudata.id === 'history'){
                            let content = miniPage.getHrefContent('page/mockHistory.html');
                            let index = layer.open({
                                title: '接口历史版本',
                                type: 1,
                                shade: 0.2,
                                maxmin: true,
                                shadeClose: false,
                                area: '980px', // 宽度780, 高度自适应
                                offset: '120px', // 手动设置垂直坐标
                                content: content,
                                success: function (layero, dIndex) {
                                },
                                end: function (index) {
                                },
                                full: function(layero, index, that) {
                                    // 这样做，是为了放大缩小时，表格可以自适应大小
                                    table.reload('historyTableId');
                                },
                                restore: function(layero, index, that) {
                                    table.reload('historyTableId');
                                }
                            });
                        } else if(menudata.id === 'accessLog'){
                            let content = miniPage.getHrefContent('page/mockAccessLog.html');
                            let index = layer.open({
                                title: '接口访问日志',
                                type: 1,
                                shade: 0.2,
                                shadeClose: false,
                                area: '780px', // 宽度780, 高度自适应
                                offset: '120px', // 手动设置垂直坐标
                                content: content,
                                success: function (layero, dIndex) {
                                },
                                end: function (index) {
                                },
                                full: function(layero, index, that) {
                                    // 这样做，是为了放大缩小时，表格可以自适应大小
                                    table.reload('accessLogTableId');
                                },
                                restore: function(layero, index, that) {
                                    table.reload('accessLogTableId');
                                }
                            });
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });


    });

    /**
     * 负责数据到粘贴板
     * @param text
     */
    function handleClipboard(text) {
        const oInput = document.createElement('input');
        oInput.value = document.getElementById("headerRootAddress").textContent + text;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';// 设置class名
        document.getElementsByClassName("oInput")[0].remove();// 移除这个input
        layer.msg('已复制到粘贴板');
    }

    function getLocalHost() {
        let url = location.href;
        let protocolIndex = url.indexOf('://');
        let index = url.indexOf('/', protocolIndex + 3); // 从第三个 '/' 字符开始查找
        let baseUrl = url.substring(0, index); // 截取从开头到 '/' 的子串
        return (baseUrl); // 输出 https://127.0.0.1:9019
    }


    function formatJson(jsonText) {
        try {
            // 使用 JSON.stringify() 将 JSON 数据转换为字符串
            // 第二个参数为 null，表示不使用额外的替换函数；第三个参数为缩进空格数，这里使用 2 个空格作为缩进
            let formattedJson = JSON.stringify(JSON.parse(jsonText), null, 2);
            return formattedJson;
        } catch (error) {
            // 如果解析失败，捕获错误并提示用户输入的不是有效的 JSON 数据
            layer.msg('输入的数据不是有效的 JSON 格式！');
            return jsonText;
        }
    }

    function zipJson(jsonText) {
        try {
            // 使用 JSON.stringify() 将 JSON 数据转换为字符串
            // 第二个参数为 null，表示不使用额外的替换函数；第三个参数为缩进空格数，这里使用 2 个空格作为缩进
            let zipJson = JSON.stringify(JSON.parse(jsonText));
            // 将格式化后的 JSON 字符串写入到 textarea 输入框中
            return zipJson;
        } catch (error) {
            // 如果解析失败，捕获错误并提示用户输入的不是有效的 JSON 数据
            layer.msg('输入的数据不是有效的 JSON 格式！');
            return jsonText;
        }
    }


    var layerTipIndex
    window.showTip = function (t) {
        var msg = '点击复制链接';
        //小tips
        layerTipIndex = layer.tips(msg, t, {
            tips: [1, '#5E7CE0'],
            time: 4000
        })
    }

    window.closeTip = function (t) {
        layer.close(layerTipIndex);
    }
</script>